<template>
  <div class="bottomLeftChart">
    <Chart :cdata="cdata" />
  </div>
</template>

<script>
import Chart from './chart.vue';
import {rig2Data} from '@/utils/data';
export default {
  data () {
    return {
      cdata: {
        sourceData: [],
        seriesData:[],
        formatter: null,
      }
    };
  },
  components: {
    Chart,
  },
  mounted () {
    this.getData();
  },
  methods: {
    // 根据自己的业务情况修改
    getData () {
       this.cdata.formatter = (params)=>{
         let text = ` ${params[0].value.product}<br />`;
         params.forEach(element => {
           console.log(element);
           if(element.seriesType === "line"){
              text += `${element.marker}${'得分率('+element.seriesName +')'}：${element.value['得分率('+element.seriesName +')']}<br />`
           }else{
              text += `${element.marker}${element.seriesName}：${element.value[element.seriesName]}<br />`
           }
         });
         return text;
       }
      this.cdata.sourceData = rig2Data;
      this.cdata.seriesData = [
        {type: 'bar', smooth: true, seriesLayoutBy: 'row'},
        {type: 'bar', smooth: true, seriesLayoutBy: 'row'},
        {
          type: 'line',
          smooth: true,
          markLine: {
            silent: true,
            data: [
              {
                yAxis: 40,
                name: "不含未成年人总分"
              }
            ],
            precision: 0,
            label: {
              normal: {
                formatter: "不含未成\n年人总分: \n {c}"
              }
            },
            lineStyle: {
              normal: {
                color: "rgba(248,211,81,.7)"
              }
            }
          },
        },
        {
          type: 'line', 
          smooth: true,
          markLine: {
            silent: true,
            data: [
              {
                yAxis: 20,
                name: "未成年人总分"
              }
            ],
            precision: 0,
            label: {
              normal: {
                formatter: "未成年人\n总分: {c}"
              }
            },
            lineStyle: {
              normal: {
                color: "rgba(248,211,81,.7)"
              }
            }
          }
        }
      ]
    },
  }
};
</script>

<style lang="scss" scoped>
.bottomLeftChart{
  width: 100%;
  height: 100%;
  >div{
    width: 100%;
    height: 100%;
  }
}
</style>